import React from 'react';
import { connect } from 'umi';
import { Button } from 'antd'

import './index.css';

const Index = (props) => {
  console.log(props);
  const { user, dispatch } = props

  const add = () => {
    dispatch({
      type: 'user/add'
    })
  }

  const asyncAdd = () => {
    dispatch({
      type: 'user/asyncAdd'
    })
  }

  return (
    <div>
      <h1 >Page user\index</h1>
      <h3>
        <Button onClick={add} type='primary' >
          +
        </Button>|
        <Button onClick={asyncAdd} type='primary' >
          async Add
        </Button>
        <p style={{ color: 'red', padding: ' 0 50px ' }} >
          {user.num}
        </p>
      </h3>
      {
        props.children
      }
    </div>
  );
}

const mapState = state => ({
  user: state.user
})

export default connect(mapState)(Index)
